<template>
  <div>
    <van-tabs v-model="active" animated sticky>
      <van-tab title="独家放送" class="content-box">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- 独家放送组件 -->
          <cloud-village-exclusive :ExclusiveList="ExclusiveList"/>
        </van-list>
      </van-tab>
      <van-tab title="热门话题" class="content-box">
        <!-- 热闹话题组件 -->
        <cloud-village-hot :topicList="topicList"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script  type='module'>
import CloudVillageExclusive from './components/CloudVillageExclusive'// 独家放送组件
import CloudVillageHot from './components/CloudVillageHot'// 热闹话题组件
export default {
  name: 'CloudVillage',
  props: {
  },
  data () {
    return {
      active: 1,
      page: 0,
      ExclusiveList: [],
      loading: false,
      finished: false,
      topicList: [],
      getTimestamp: new Date().getTime()

    }
  },
  components: {
    CloudVillageExclusive, // 独家放送组件
    CloudVillageHot // 热门话题组件
  },
  methods: {
    // 获取独家放送数据函数
    async getExclusiveList () {
      const res = await this.$http({ url: '/personalized/privatecontent/list', params: { limit: 20, offset: this.page } })
      this.ExclusiveList = [...this.ExclusiveList, ...res.result.map(itme => ({
        id: itme.id,
        name: itme.name,
        picUrl: itme.picUrl,
        time: itme.time
      }))]
      // console.log(res)
    },
    // 获取热门话题数据函数
    async getTopicList () {
      const res = await this.$http({ url: '/hot/topic?timestamp=' + this.getTimestamp, params: { imit: 30, offset: 30 } })
      this.topicList = [...this.topicList, ...res.hot.map(itme => ({
        actId: itme.actId,
        sharePicUrl: itme.sharePicUrl,
        title: itme.title,
        participateCount: itme.participateCount
      }))]

      console.log(this.topicList)
    },
    onLoad () {
      if (this.page < 3) {
        this.loading = false
        this.page++
        console.log(this.page)
        console.log('第' + this.page + '页数据')
        this.getExclusiveList()
      } else {
        this.finished = true
      }
    }
  },
  created () {
    // 调用获取独家放送数据函数
    this.getExclusiveList()
    // 调用获取热门话题数据函数
    this.getTopicList()
  }
}

</script>

<style lang="less" scoped>
.content-box {
  padding: 4px 14px;
}
</style>
